<template>
  <div class="search-popup">
    <van-search
      v-model="searchValue"
      shape="round"
      show-action
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <!-- 列表展示区 -->
    <HistoryHot @tagClick="tagClick" v-if="blockShow === 1" :historyList="historyList" :hotList="hotList" />
    <SearchTipsList @cellClick="cellClick" v-else-if="blockShow === 2" :searchTipsList="searchTipsList" />
    <ProductSort v-else :goodsList="goodsList" :filterCategory="filterCategory" @priceChange="priceChange" @categoryChange="categoryChange"  />
  </div>
</template>

<script>
import HistoryHot from '@/components/HistoryHot.vue'
import SearchTipsList from '@/components/SearchTipsList.vue'
import ProductSort from '@/components/ProductSort.vue'
import { getSearchPopupData, getSearchTipsListData, getGoodsListData } from '@/request/api'
export default {
  components: { HistoryHot, SearchTipsList, ProductSort },
  data () {
    return {
      // 搜索框双向数据绑定的内容
      searchValue: '',
      // 搜索框的提示词
      placeholderVal: '',
      // 用于切换组件
      // 1为展示历史记录和热门搜索
      // 2为展示搜索提示的列表
      // 3为展示点击搜索后的产品列表
      blockShow: 1,
      // 历史标签数据
      historyList: [],
      // 热门标签数据
      hotList: [],
      // 搜索实时提示的列表数据
      searchTipsList: [],
      // 商品的分类数据
      filterCategory: [],
      // 搜索后得到的商品数据
      goodsList: [],
      // 价格排序
      order: 'desc',
      // 分类id
      categoryId: 0,
      // 默认搜索方式
      sort: 'id'
    }
  },
  created() {
    // 获取搜索弹出框的数据
    getSearchPopupData().then(res => {
      if (res.errno === 0) {
        this.placeholderVal = res.data.defaultKeyword.keyword
        this.historyList = res.data.historyKeywordList
        this.hotList = res.data.hotKeywordList
      }
    })
  },
  methods: {
    // 用户回车或点搜索后执行
    onSearch(val) {
      this.blockShow = 3
      getGoodsListData({
        keyword: val,
        page: 1,
        size: 20,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort
      }).then(res => {
        // 解构
        const { filterCategory, goodsList } = res.data
        // 利用JSON.prase(JSON.stringify(对象).replace(/属性名/g,'更改后的属性名'))
        // 修改对象里的属性，便于后面vant的DropDown组件的使用
        const newFilterCategory = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'))
        // console.log(newFilterCategory)
        this.filterCategory = newFilterCategory
        this.goodsList = goodsList
      })
    },
    onCancel() {
      this.$router.go(-1)
    },
    onInput(val) {
      this.blockShow = 2
      // 获取实时搜索的文本提示的数据列表
      getSearchTipsListData({ keyword: val }).then(res => {
        if (res.errno === 0) {
          this.searchTipsList = res.data
        }
      })
    },
    // ProductSort传过来的分类改变事件
    categoryChange(value) {
      this.categoryId = value
      // 调用搜索框的搜索方法(发请求)，参数为原来搜索框的内容
      this.onSearch(this.searchValue)
    },
    // ProductSort传过来的价格排序改变事件
    priceChange(value) {
      this.order = value
      this.sort = 'price'
      this.onSearch(this.searchValue)
    },
    // HistoryHot传过来的点击tag标签事件
    tagClick(val) {
      this.searchValue = val
      this.onSearch(val)
    },
    // SearchTipsList传过来的点击提示cell事件
    cellClick(val) {
      this.searchValue = val
      this.onSearch(val)
    }
  }
}
</script>

<style lang='less' scoped>
.search-popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #fff;
  z-index: 500;
}
</style>
